<template>
   <div class="t-nav t-nav-new">
        <div class="t-nav-wrap clearfix">
            <div class="t-nav-l clearfix">
                <div class="t-nav-logo">
                    <a href="/" title="返回首頁">
                    <img src="/img/home2/rc-logo.png" alt="RC直播">
                </a>
                </div>
                <div class="t-nav-menu">
                    <a href="/" target="_blank">首頁</a>
                    <a href="/index.php?c=newHome&a=family" target="_blank">家族</a>
                    <a href="/index.php?c=newHome&a=ranking" target="_blank">排行</a>
                    <a href="/index.php?c=newHome&a=act" target="_blank">活動</a>
                    <a href="/shop" target="_blank">商城</a>
                    <a href="/apps/mvp" target="_blank">MVP</a>
                    <a href="/activity/6th/" target="_blank">2017年度盛典</a>
                    <a href="http://forum.raidcall.com.tw/forum.php" target="_blank">論壇</a>
                </div>
            </div>
            <div class="t-nav-r">
                <div class="t-nav-sub">
                    <div class="t-nav-pane fl">
                        <div class="t-nav-stored">  
                          <a href="javascript:;" class="nav-profile-item t-nav-charge"  @click="onCharge"></a>
                        </div>
                        <div class="t-nav-login" id="j-nav-login">                            
                            <a href="javascript:;" class="nav-item nav-login" @click="onLogin">登入</a>
                            <a href="javascript:;" class="nav-reg"  @click="onReg">註冊</a>
                        </div>
                        <div class="t-nav-profile" id="j-nav-profile">
                            <a href="/index.php?c=showroom&a=baseInfo" class="nav-item nav-nick" target="_blank">nick</a>
                            <a href="javascript:;" class="nav-logout"  @click="onLogout">退出</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="t-nav-border"></div>
    </div>
</template>

<script>
import store from "../store/index";
import { sharefacebook, alertDialogCommpent } from "../api/util";
export default {
  data() {
    return {};
  },
  components: {},
  methods: {
    onLogin() {
      RC.login(function() {
        // location.reload();
      });
    },
    onReg() {
      RC.reg();
    },
    onCharge() {
      RaidPay.charge();
    },
    onLogout() {
      RC.logout(function() {
        location.reload();
      });
    },
    onFeedback() {
      RC.feedback();
    }
  },
  mounted: function() {
    var vm = this;
    $(function() {
      RC.init({
        appId: 100000,
        reload: false,
        redirect: ""
      });
      RC.Event.subscribe("login", function(ret) {
        if (ret && ret.uid) {
          conf.userInfo = ret;
          $("#j-nav-login").hide();
          $("#j-nav-profile")
            .find(".nav-nick")
            .text(ret.nick)
            .end()
            .show();
        }
      });

      RC.Event.subscribe("logout", function(ret) {
        $("#j-nav-profile").hide();
        $("#j-nav-login").show();
      });

      RC.getLoginStatus(function() {
        if (!RC.isLogin) {
          // return RC.open()
        }
      });
    });
  },
  computed: {
    userinfo() {
      return store.getters.userinfo;
    }
  }
};
</script>
<style lang="less" scope>
@import url("~assets/less/_mixins.less");
.t-nav-new.t-nav {
  .t-nav-wrap {
    width: 1350px;
    margin: auto;
    font-size: 20px;
    padding: 12px 0;
  }
  .t-nav-l {
    vertical-align: middle;
    float: left;
    .t-nav-logo {
      float: left;
      margin-right: 20px;
    }
    .t-nav-menu {
      float: left;
      a {
        display: inline-block;
        margin: 0 25px;
        color: @color-font-grey;
        font-size: 16px;
        &:hover {
          color: #333;
        }
      }
    }
  }
  .t-nav-r {
    float: right;
    .t-nav-pane {
      color: @color-font-blue;
      .t-nav-stored {
        float: left;
        margin: 5px 12px 0 0;
        .t-nav-charge {
          display: block;
          width: 84px;
          height: 21px;
          background: url("@{img-url}btn-stored.png") no-repeat;
          background-size: 100%;
          &:hover {
            opacity: 0.8;
          }
        }
      }
      .t-nav-login,
      .t-nav-profile {
        float: left;
        a {
          color: @color-font-blue;
          font-size: 16px;
        }
        .nav-item {
          &:after {
            content: "";
            display: inline-block;
            margin-left: 5px;
            width: 1px;
            height: 12px;
            background: @color-font-blue;
          }
        }
      }
      .t-nav-profile {
        display: none;
      }
    }
  }
}
</style>